/**
*@author       wuwg
*@createTime   2018/03/20
*@updateTime   2018/04/12
*@description
*@rule
 */
@import "../../../mixins/input/input-mixins.less";
@import '../../../config/config.less';

@css-prefix-input-number: ~"@{css-prefix}input-number";

.input-number-error(~"@{css-prefix-form-item}");

.handler-disabled() {
    opacity: 0.72;
    color: #ccc !important;
    cursor: @cursor-disabled;
}

.@{css-prefix-input-number} {
    @radius-wrap: 0 @btn-border-radius @btn-border-radius 0;

    .input();
    width: 100%;
    text-align: left;
    padding: 0 7px;
    outline: 0;
    -moz-appearance: textfield;

    &-wrapper {
      display: inline-block;
      width: 100%;
      vertical-align: middle;
      line-height: normal;
      text-align: left;
      /*overflow: hidden;*/
    }

    &-handler-wrap {
        width: 22px;
        height: 100%;
        border-left: 1px solid @border-color-base;
        border-radius: @radius-wrap;
        background-color:transparent;
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        transition: opacity @transition-time @ease-in-out;
        &:hover {
          opacity: 1;
        }
    }

    &:hover + &-handler-wrap {
        opacity: 1;
    }

    &-handler-up {
        cursor: pointer;
        &-inner {
            top: 1px;
        }
    }

    &-handler-down {
        border-top: 1px solid @border-color-base;
        top: -1px;
        cursor: pointer;
    }

    &-handler {
        display: block;
        width: 100%;
        height: @input-height-base / 2;
        line-height: 0;
        text-align: center;
        overflow: hidden;
        color: #999;
        position: relative;

        &:hover &-up-inner,
        &:hover &-down-inner {
            color: tint(@primary-color, 20%);
        }
    }

    &-handler-up-inner,
    &-handler-down-inner {
        width: 12px;
        height: 12px;
        line-height: 12px;
        font-size: 14px;
        color: #999;
        user-select: none;
        position: absolute;
        right: 4px;
        transition: all @transition-time linear;
    }


    &-handler-down-disabled,
    &-handler-up-disabled,
    &-wrapper-disabled {
        .@{css-prefix-input-number}-handler-down-inner,
        .@{css-prefix-input-number}-handler-up-inner {
            .handler-disabled();
        }
    }

    &-wrapper-disabled {
        .@{css-prefix-input-number} {
            opacity: 0.72;
            cursor: @cursor-disabled;
            background-color: #f3f3f3;
        }
        .@{css-prefix-input-number}-handler-wrap {
            display: none;
        }
        .@{css-prefix-input-number}-handler {
            .handler-disabled();
        }
    }
}

.input-number-error(@class){
    .@{class}-error {
        .@{css-prefix-input-number}{
            .input-error();
            &-focused {
                .active-error();
            }
        }
    }
}
